<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>用户留存率统计</title>
  <script src="lib/echarts.min.js"></script>
  <script src="lib/itcast.js"></script>
  <script src="lib/jquery.min.js"></script>
</head>

<body>
  <div style="height:400px;"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    mCharts.showLoading() // 在获取数据之前, 显示加载动画

    var option = {
  dataZoom: {
    type: "inside",
    xAxisIndex: 0,
    // start: 3,
    // end: 75.5
  },

  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#AB6EE5'],
  title: {
    text: '▎用户留存率统计',
    left: 20,
    top: 5
  },
  tooltip: {
    show: true,
    trigger: 'axis',
  },

  legend: {
    data:['第七日留存率','第三日留存率','次日留存率']
  },
  
  grid: {
    top: '20%',
    left: '3%',
    right: '6%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      name: '时间',
      type: 'category',
      boundaryGap: false,
      data: []
    }
  ],
  yAxis: {
    name: '%',
        type: 'value',
        scale: true,

        axisLabel: {
            show: true,
        interval: 'auto',
        formatter: '{value} %'//纵坐标百分比
        
        }
       },
  series: [
    {
      name: '第七日留存率',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: []
    },
    {
      name: '第三日留存率',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: []
    },
    
    {
      name: '次日留存率',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: []
    }
    
  ]
};
    mCharts.setOption(option)
     mCharts.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts.off('click') // 解绑click的事件

    mCharts.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // 调用echarts实例对象的resize方法
      mCharts.resize()
    }
        //使用jQuery的Ajax请求，通过GET方法从"http://10.180.210.100:9898/data17"获取数据，并根据返回的数据更新图表配置。

    $.get("http://127.0.0.1:9898/data17",function(data,status){
      mCharts.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
      // 对数据按日期从小到大排序，并格式化日期
      data.sort(function(a, b) {
        function normalizeDate(str) {
          if (!str) return '';
          // 处理ISO格式日期
          if (str.indexOf('T') > -1) {
            let d = new Date(str);
            return d.getFullYear().toString().padStart(4, '0') +
              (d.getMonth()+1).toString().padStart(2, '0') +
              d.getDate().toString().padStart(2, '0');
          }
          if (str.indexOf('-') > -1) return str.replace(/-/g, '');
          return str;
        }
        return normalizeDate(a.date) > normalizeDate(b.date) ? 1 : -1;
      });
      var xAxi = []
      var serie1 =[]
      var serie2 =[]
      var serie4 =[]
      for (let i=0; i<data.length;i++){
        // 格式化日期为"YYYY-MM-DD"
        let rawDate = data[i].date;
        let fmtDate = rawDate;
        if (rawDate) {
          if (rawDate.length === 8 && rawDate.indexOf('-') === -1) {
            fmtDate = rawDate.slice(0,4) + '-' + rawDate.slice(4,6) + '-' + rawDate.slice(6,8);
          } else if (rawDate.indexOf('T') > -1) {
            // ISO格式
            let d = new Date(rawDate);
            fmtDate = d.getFullYear() + '-' +
              String(d.getMonth()+1).padStart(2, '0') + '-' +
              String(d.getDate()).padStart(2, '0');
          }
        }
        xAxi.push(fmtDate)
        // 去掉百分号并转为数字
        serie1.push(parseFloat(data[i].day7_retention_rate))
        serie2.push(parseFloat(data[i].day3_retention_rate))
        serie4.push(parseFloat(data[i].day1_retention_rate))
      }
      // console.log(xAxi);
      mCharts.setOption({
        xAxis:{data: xAxi},
        series:[{data: serie1},{data: serie2},{data: serie4}]
      });
    })
  </script>
</body>

</html>